<%@ include file="include.jsp" %>

<%
	String curGroupName ="curGroupName";
	String icon = themeDisplay.getPathThemeImages() + "/common/site_icon.png";
	//String categoryPortletsContent = "categoryPortletsContent";
	String menuSite_title ="Tieu de sites";
	String[] menuSiteItems = {"menu Site 1", "menu Site 2"};
	String[] menuSiteIcons = {"/images/icons/admin.png", "/images/icons/home.png"};
	
	String menuDropDown_title ="Tieu de dropdown";
	String[] menuDropDownItems = {"menu drop down 1", "menu drop down 2"};
	String[] menuDropDownIcons = {"/images/icons/admin.png", "/images/icons/home.png"};
	
	String  menu_title ="Tieu de menu";
	String[] menuItems = {"menu 1", "menu 2"};
	String[] menuIcons = {"/images/icons/admin.png", "/images/icons/home.png"};
	
	String title = null;
%>
<div class="portal-add-content">
	<div class="control-panel-tools">
		<aui:input cssClass="search-panels" inputCssClass="search-panels-input" label="" name="searchPanel" />
	</div>
	<liferay-ui:panel-container extended="<%= true %>" id="controlPanelMenuAddContentPanelContainer" persistState="<%= true %>">
		<liferay-util:buffer var="groupSelectorIconMenu">
			<liferay-ui:icon-menu align="left" direction="down" icon="<%= icon %>" id="groupSelector" message="<%= HtmlUtil.escape(StringUtil.shorten(menuSite_title, 25)) %>">
				<%
					for (int i = 0; i < menuSiteItems.length; i++) {
						String url = HttpUtil.setParameter(PortalUtil.getCurrentURL(request), "doAsGroupId", 1);
				%>

					<liferay-ui:icon
						image="<%= contextPath + menuSiteIcons[i] %>"
						message="<%= HtmlUtil.escape(menuSiteItems[i]) %>"
						url="<%= url %>"
					/>

				<%
					}
				%>
			</liferay-ui:icon-menu>
			<liferay-ui:staging cssClass="manage-pages-branch-menu" extended="<%= true %>" groupId="1" icon="/common/tool.png" showManageBranches="<%= false %>" />
		</liferay-util:buffer>
		<%
			title = groupSelectorIconMenu;
		%>
		<liferay-util:buffer var="menuContentDropDown">
			<c:if test="<%= menuDropDownItems != null && menuDropDownItems.length > 0 %>">
				<div class="nobr lfr-title-scope-selector">
					<liferay-ui:icon-menu align="left" direction="down" icon="" message='<%= menuDropDown_title %>'>
						<liferay-ui:icon
							image="folder"
							message="default"
							url='<%= HttpUtil.setParameter(PortalUtil.getCurrentURL(request), "doAsGroupId", 1) %>'
						/>
						<ul class="category-portlets">
						<%
							for (int i = 0; i < menuDropDownItems.length; i++) {
						%>
								<li class="<%= i== 2 ? "selected-portlet" : "" %>">
									<a href="<liferay-portlet:renderURL doAsGroupId="<%= themeDisplay.getScopeGroupId() %>" portletName="LibraryPortlet" windowState="<%= WindowState.MAXIMIZED.toString() %>" />" id="<portlet:namespace />portlet_<%= menuDropDownItems[i] %>">
										<c:choose>
											<c:when test="<%= Validator.isNull(menuDropDownIcons[i]) %>">
												<liferay-ui:icon src='<%= themeDisplay.getPathContext() + "/html/icons/default.png" %>' />
											</c:when>
											<c:otherwise>
												<liferay-ui:icon src='<%= contextPath + menuDropDownIcons[i] %>' />
											</c:otherwise>
										</c:choose>
										<%= menuDropDownItems[i] %>
									</a>
								</li>
						<%
							}
						%>
						</ul>
					</liferay-ui:icon-menu>
				</div>
			</c:if>
		
			<ul class="category-portlets">
			<%
				for (int i = 0; i < menuItems.length; i++) {
			%>
					<li class="<%= i== 2 ? "selected-portlet" : "" %>">
						<a href="<liferay-portlet:renderURL doAsGroupId="<%= themeDisplay.getScopeGroupId() %>" portletName="LibraryPortlet" windowState="<%= WindowState.MAXIMIZED.toString() %>" />" id="<portlet:namespace />portlet_<%= menuItems[i] %>">
							<c:choose>
								<c:when test="<%= Validator.isNull(menuIcons[i]) %>">
									<liferay-ui:icon src='<%= themeDisplay.getPathContext() + "/html/icons/default.png" %>' />
								</c:when>
								<c:otherwise>
									<liferay-ui:icon src='<%= contextPath + menuIcons[i] %>' />
								</c:otherwise>
							</c:choose>

							<%= menuItems[i] %>
						</a>
					</li>

			<%
				}
			%>
			</ul>
		</liferay-util:buffer>
		<liferay-util:buffer var="menuContent">
			<ul class="category-portlets">
			<%
				for (int i = 0; i < menuItems.length; i++) {
			%>
					<li class="<%= i== 2 ? "selected-portlet" : "" %>">
						<a href="<liferay-portlet:renderURL doAsGroupId="<%= themeDisplay.getScopeGroupId() %>" portletName="LibraryPortlet" windowState="<%= WindowState.MAXIMIZED.toString() %>" />" id="<portlet:namespace />portlet_<%= menuItems[i] %>">
							<c:choose>
								<c:when test="<%= Validator.isNull(menuIcons[i]) %>">
									<liferay-ui:icon src='<%= themeDisplay.getPathContext() + "/html/icons/default.png" %>' />
								</c:when>
								<c:otherwise>
									<liferay-ui:icon src='<%= contextPath + menuIcons[i] %>' />
								</c:otherwise>
							</c:choose>

							<%= menuItems[i] %>
						</a>
					</li>

			<%
				}
			%>
			</ul>
		</liferay-util:buffer>
		<liferay-ui:panel collapsible="<%= true %>" cssClass="lfr-component panel-page-category" extended="<%= true %>" id='<%= "panel-manage-" + "my" %>' persistState="<%= true %>" title="<%= menu_title %>">
			<div class="lfr-panel-container" id="controlPanelMenuAddContentPanelContainer">
				<div class="lfr-panel lfr-component panel-page-category lfr-extended" id="panel-manage-content">
					<div class="lfr-panel-content">
						<%= menuContent %>
					</div>
				</div>
			</div>
		</liferay-ui:panel>
		<liferay-ui:panel collapsible="<%= true %>" cssClass="lfr-component panel-page-category" extended="<%= true %>" id='<%= "panel-manage-" + "server" %>' persistState="<%= true %>" title="<%= menuDropDown_title %>">
			<div class="lfr-panel-container" id="controlPanelMenuAddContentPanelContainer">
				<div class="lfr-panel lfr-component panel-page-category lfr-extended" id="panel-manage-content">
					<div class="lfr-panel-content">
						<%= menuContentDropDown %>
					</div>
				</div>
			</div>
		</liferay-ui:panel>
	
		<liferay-ui:panel collapsible="<%= true %>" cssClass="lfr-component panel-page-category" extended="<%= true %>" id='<%= "panel-manage-" + "category" %>' persistState="<%= true %>" title="<%= title %>">
			<%= menuContent %>
		</liferay-ui:panel>
	</liferay-ui:panel-container>
</div>
<aui:script use="liferay-panel">
	var trigger = A.one('#<portlet:namespace />groupSelector a');

	var panelContainer = Liferay.Panel.get('controlPanelMenuAddContentPanelContainer');

	if (trigger && panelContainer) {
		trigger.on(
			'click',
			function(event) {
				panelContainer.once(
					'collapse',
					function(event) {
						event.preventDefault();
					}
				);
			}
		);
	}
</aui:script>